<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
    <view>
		<view>
			<view class="top-back"></view>
			<view class="botton-back"></view>
			<view class="content">
				<view class="left">
					<view class="left-img">
						<image src="../../static/logo.png" mode=""></image>
					</view>
				</view>
				<view class="right">
					<view class="weui-article__h2">非凡酒店</view>
					<view class="weui-article__section">
						<view class="weui-article__h4">地址: 北京深圳十二道路....</view>
						<view class="weui-article__h4">电话: 13652478563</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="page">
			<view class="page__bd">
				<view class="weui-panel weui-panel_access" v-if="tabsTrue">
					<view class="weui-panel__bd">
						<view v-for="(topic,key) in topics" :key="key">
							<a url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
								<view class="weui-media-box__hd weui-media-box__hd_in-appmsg hd_in-appmsg">
									<image class="weui-media-box__thumb" src="https://cdn.learnku.com/uploads/avatars/3995_1516760409.jpg?imageview2/1/w/200/h/200" />
								</view>
								<view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
									<view class="weui-flex">
										<view class="weui-media-box__title"><view class="placeholder">{{ topic.title }}{{ key }}</view></view>
										<view class="weui-flex__item">
											<view class="placeholder placeholder-right"></view>
										</view>
									</view>
									<view class="weui-flex">
										<view class="weui-flex__item"><view class="placeholder">剩余:{{ topic.num }}间</view></view>
									</view>
									<view class="weui-media-box__desc">床型{{ topic.type }}米</view>
									<view class="weui-media-box__desc">可住{{ topic.zhu }}人数</view>
								</view>
								<view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
									<view class="weui-flex">
										<view class="weui-media-box__title"><view class="placeholder"></view></view>
										<view class="weui-flex__item">
											<view class="placeholder placeholder-right">￥{{ topic.price }}</view>
										</view>
									</view>
									<view class="weui-media-box__desc placeholder-right2">
										<button type="default weui-media__right" size="mini">预定</button>
									</view>
								</view>
								
							</a>
						</view>
					</view>
					
				</view>
				
			</view>
		</view>
    </view>

</template>


<style lang="less">
	.hd_in-appmsg{width:260rpx!important;height:200rpx!important;
	}
	.placeholder-right{text-align:right;color:#5500ff;font-weight: 400;font-size: 17px;}
	.placeholder-right2{
		font-weight: 400;font-size: 34rpx;display:flex;
		button{background-color:#5500ff;color:#ffffff;left: 36rpx;font-size:24rpx;}
	}
	.weui-media-box__bd_in-appmsg{font-size:28rpx!important;color:var(--weui-FG-2)}
	// .placeholder{margin:5px;padding:0 10px;text-align:center;background-color:var(--weui-BG-1);height:2.3em;line-height:2.3em;color:var(--weui-FG-1)}
	.top-back{background-color: #5500ff;height: 200rpx;}
	.botton-back{background-color: #FFFFFF;height: 200rpx;}
	.content{
		background-color: #fff;position: absolute;top:35rpx;width:680rpx;
		left:35rpx;border-radius:16rpx;height:300rpx;box-shadow:4rpx 6rpx 8rpx #959595;
		.left{width:272rpx;height:240rpx;float:left;margin: 30rpx auto;
			.left-img{
				height:240rpx;
				padding: 12rpx 10rpx 10rpx 35rpx;
				image{height:90%;width:90%;}
			}
		}
		.right{
			width:408rpx;height:228rpx;float:left;margin: 30rpx auto;padding-top:12rpx;
			.weui-article__h2{font-size:35rpx;color:#515151;font-family:"宋体";font-weight: bold;}
			.weui-article__h4{color:#8a8a8a;font-size:24rpx;}
		}
	}
</style>


<script>
	export default {
		data() {
			return {
				tab1: 0,
				tabs1: ['房型列表', '酒店详情', '酒店评价'],
				tabsTrue:true,
				
				title: 'request-payment',
				topics: [{
					id: 1,
					title: '测试1',
					body: 'larabbs 测试内容1',
					num: '6',
					price: '100',
					zhu: '3',
					type: '1.8'
				}, {
					id: 2,
					title: '测试2',
					body: 'larabbs 测试内容2',
					num: '22',
					price: '40',
					zhu: '1',
					type: '1.2'
				}, {
					id: 3,
					title: '测试3',
					body: 'larabbs 测试内容3',
					num: '6',
					price: '200',
					zhu: '4',
					type: '2.2'
				}, {
					id: 4,
					title: '测试4',
					body: 'larabbs 测试内容4',
					num: '23',
					price: '150',
					zhu: '3',
					type: '1.6'
				}]
			}
		},
		
		methods: {
			clickTab(e) {
				console.log('fdsafsa');
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		},
		
	}
</script>